import { Row, Col, Button, DatePicker, Spin } from "antd";
import { useEffect, useState } from "react";
import { fetchData } from "./services/api";
import KpiCards from "./components/KpiCards";
import OrderChart from "./components/OrderChart";

export default () => {
  const [stats, setStats] = useState(null);
  const [loading, setLoading] = useState(true);

  const loadData = async () => {
    setLoading(true);
    try {
      const data = await fetchData();
      setStats(data);
    } catch (error) {
      console.error("加载数据失败:", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadData();
  }, []);

  return (
    <div style={{ padding: 24 }}>
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <DatePicker.RangePicker />
          <Button onClick={loadData} style={{ marginLeft: 16 }}>
            刷新数据
          </Button>
        </Col>

        <Col span={24}>
          <Spin spinning={loading}>
            <KpiCards data={stats} />
          </Spin>
        </Col>

        <Col span={24}>
          <Spin spinning={loading}>
            <OrderChart data={stats} />
          </Spin>
        </Col>
      </Row>
    </div>
  );
};
